<template>
  <div class="hot-section">
    <van-cell is-link value="更多">
      <template #title>
        <span v-if="news.topic" class="topic">专题</span>
        <span class="custom-title">{{ news.title }}</span>
      </template>
    </van-cell>
    <div class="list-wrap">
      <div
        class="list-item"
        v-for="(item, index) in news.sections"
        :key="index"
        :style="{ width: news.imgStyle.width }"
      >
        <img
          :src="item.icon"
          alt=""
          srcset=""
          class="image-contain"
          :style="news.imgStyle"
        />
        <div class="title" :class="{ textLeft: news.hotType === 'hotMid' }">
          {{ item.title }}
        </div>
        <div class="button" v-if="news.showIcon">关注</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    news: {
      type: Object,
      default() {
        return {};
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.hot-section {
  font-size: 14px;
  border-bottom: 1px solid #dddddd;
  &:last-child {
    border: 0;
  }
  .list-wrap {
    .list-item {
      flex-shrink: 0;
      margin-right: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    overflow-x: auto;
    &::-webkit-scrollbar {
      display: none;
    }
    display: flex;
    position: relative;
    top: -1px;
    background: #ffffff;
    padding: 10px;
    .title {
      text-align: center;
      padding: 10px 0;
      &.textLeft {
        text-align: left;
        font-size: 16px;
      }
    }
    .button {
      width: 50px;
      line-height: 25px;
      height: 25px;
      border-radius: 12px;
      border: 1px solid #cb6768;
      color: #cb6768;
      text-align: center;
    }
  }
  .image-contain {
    height: 70px;
    width: 70px;
    border-radius: 18px;
  }
  .van-cell {
    padding: 10px 0;
    .custom-title {
      font-size: 16px;
    }
    .topic {
      color: #cb6768;
      background-color: rgba(255, 0, 0, 0.2);
      margin-right: 6px;
    }
  }
}
</style>
